<template>
    <div class="content">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-button type="primary" @click="onInsert">添加</el-button>
                <el-date-picker class="ml15" v-model="info.month" type="month" value-format="YYYY-MM" placeholder="请选择月份" />
            </el-col>
        </el-row>
        <h2 class="text-center">项目月底付款汇总表</h2>
        <el-table :data="tableData" border show-summary style="width: 100%;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column label="班组/供应商" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.title" />
                </template>
            </el-table-column>
            <el-table-column label="身份证号/纳税识别号" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.idcard" />
                </template>
            </el-table-column>
            <el-table-column label="工资卡卡号/银行帐号" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.numbers" />
                </template>
            </el-table-column>
            <el-table-column label="工资卡开户银行" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.bank" />
                </template>
            </el-table-column>
            <el-table-column label="联系电话" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.mobile" />
                </template>
            </el-table-column>
            <el-table-column label="本月实发工资" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.salary" />
                </template>
            </el-table-column>
            <el-table-column label="支付单位\用途" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.units" />
                </template>
            </el-table-column>
            <el-table-column label="个人签字" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.user_sign" />
                </template>
            </el-table-column>
            <el-table-column label="班组/供应商签字" show-overflow-tooltip>
                <template #default="scope">
                    <el-input v-model="scope.row.labor_sign" />
                </template>
            </el-table-column>
        </el-table>
        <div class="text-center mt30">
            <el-button type="primary" @click="submitForm" :loading="loading"> 保存并返回列表 </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { ref,onMounted } from 'vue'
import http from '../../../util/request'
// import http from '../../../util/request';
const loading = ref<boolean>(false)
const indexMethod = (index: number) => {
  return index+= 1
}
interface Data {
    id: number
    title: string
    idcard: string
    numbers: string
    bank: string
    mobile: string
    salary: number
    units: string
    user_sign: string
    labor_sign: string
    month:string
}
const info = ref<Data>({
    id: 0,
    title: '/',
    idcard: '/',
    numbers: '/',
    bank: '/',
    mobile: '/',
    salary: 0,
    units: '/',
    user_sign: '/',
    labor_sign: '/',
    month:'',
})
const tableData = ref<Data[]>([])

const onGetData = () => {
    // form.value.page = 0;
    // form.value.loading = true
    // http.post('/reimburse',form.value).then((response:any)=>{
    //     form.value.loading = false
    //     tableData.value = response.data.data
    //     form.value.total = response.data.total
    // })
}

const submitForm = () => {
    if(!info.value.month){
        ElMessage.error('请先选择月份');
        return
    }
    tableData.value.forEach((e:Data) => {
        e.month = info.value.month
    });
    loading.value = true
    http.post('/monthEndPay',{data:JSON.stringify(tableData.value)}).then((response:any)=>{
        loading.value = false
        tableData.value = response.data.data
    })
}



const onInsert = () => {
    let data:string = JSON.stringify(info.value)
    tableData.value.push(JSON.parse(data))
}

onMounted(()=>{
    onGetData()
})

</script>

<style scoped>

</style>